<template>
    <div>
        <el-card style="margin-bottom:20px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
          <el-breadcrumb-item >用户</el-breadcrumb-item>
          <el-breadcrumb-item >用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="20">
          <el-col :span="8">
              <el-input placeholder="请输入姓名"
              v-model="name">
                  <el-button slot="append" class="el-icon-search" @click="getList"></el-button>
              </el-input>
          </el-col>
          <el-col :span="8">
              <el-button type="primary" class="btn" @click="addDialogVisible = true">添加用户</el-button>
          </el-col>
        </el-row>
        </el-card>
        <el-card>
            <el-table :data="tableData">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="账号" prop="username"></el-table-column>
            <el-table-column label="密码" prop="password" show-overflow-tooltip ></el-table-column>
            <el-table-column label="照片" prop="photo">
                <template slot-scope="scope">
                    <img :src="scope.row.photo" width="100px">
                </template>
            </el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="性别" prop="gender"></el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"
                    @click="updatebefore(scope.row.index,scope.row)"
                    >
                    编辑</el-button>

                    <el-button type="danger" size="mini"
                    @click="del(scope.row.index,scope.row.id)">
                    删除
                    </el-button>
                </template>
            </el-table-column>
            </el-table>
            <div>
                <el-pagination
                :total="total"   
                layout="prev,pager,next"
                :page-size="pageSize"
                @current-change="change">
                <!--  @current-change="change" 
                        当前页发生改变时触发event事件change
                -->
                </el-pagination>
                <!-- 用户添加 -->
                <el-dialog 
                title="用户添加"
                :visible.sync="addDialogVisible"
                width="40%">
                    <el-form :model="formAdd">
                      <el-form-item label="id">
                        <el-input type="text" v-model="formAdd.id"></el-input>
                      </el-form-item>
                      <el-form-item label="账号：">
                        <el-input type="text" v-model="formAdd.username"></el-input>
                      </el-form-item>
                      <el-form-item label="密码：">
                        <el-input type="text" v-model="formAdd.password"></el-input>
                      </el-form-item>
                      <el-form-item label="照片">
                          <el-upload
                          action="action"
                          class="upload-demo" 
                          accept="image/jpeg,image/png,image/jpg"
                          :limit="1" 
                          :http-request="uploadFile"
                          :auto-upload="true"
                          ref="upload"
                          multiple>
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传图片</div>
                          </el-upload>
                      </el-form-item>
                      <el-form-item label="姓名：">
                        <el-input type="text" v-model="formAdd.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input type="text" v-model="formAdd.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input type="text" v-model="formAdd.gender"></el-input>
                    </el-form-item>
                    <el-form-item label="微信">
                        <el-input type="text" v-model="formAdd.weixin"></el-input>
                    </el-form-item>
                    </el-form>
                    <span slot="footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addUser">确定</el-button>
                    </span>
                </el-dialog>
                <!-- 用户编辑 -->
                <el-dialog 
                title="用户编辑"
                :visible.sync="updateDialogVisible"
                width="40%">
                    <el-form :model="updateForm">
                      <el-form-item label="id">
                        <el-input type="text" v-model="updateForm.id"></el-input>
                      </el-form-item>
                      <el-form-item label="账号：">
                        <el-input type="text" v-model="updateForm.username"></el-input>
                      </el-form-item>
                      <el-form-item label="密码：">
                        <el-input type="text" v-model="updateForm.password"></el-input>
                      </el-form-item>
                      <el-form-item label="姓名：">
                        <el-input type="text" v-model="updateForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input type="text" v-model="updateForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input type="text" v-model="updateForm.gender"></el-input>
                    </el-form-item>
                    </el-form>
                    <span slot="footer">
                    <el-button @click="updateDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateUser">确定</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tableData:[],
            pageNum:1,
            pageSize:3,
            total:0,
            formAdd: {
            id: "",
            username: "",
            password: "",
            name: "",
            photo: "",
            },
            name:'',
            updateDialogVisible: false,
            addDialogVisible:false,
            updateForm: {},
        }
    },
    methods:{
        async getList(){
            let {data:res} = await this.$axios.get('/user/getlist',{
                params:{
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    name:this.name
                }
            })
            window.console.log(res.data.list);
            this.tableData = res.data.list
            this.total = res.data.total;


        },
        change(e){
            // e是当前页数
            // window.console.log(e);
            this.pageNum = e;
            this.getList(e,this.pageSize)
        },
        async addUser(){
            this.formAdd.photo = this.nowImg
            window.console.log(JSON.stringify(this.addForm));
            let {data:res} = await this.$axios.post("/user/add", {
            id: this.formAdd.id,
            username: this.formAdd.username,
            password: this.formAdd.password,
            name: this.formAdd.name,
            photo: this.formAdd.photo,
        });
            console.log(res);
            if (res.code != 200) return this.$message.error(res.message);
            this.$message.success(res.code);
            this.getList(this.pageNum, this.pageSize);
            this.addDialogVisible = false;
        },
        async del(index,id){
            let{ data : res } = await this.$axios.get("/user/delete",{
                params:{
                    id:id
                }
            });
            if (res.code != 200) return this.$message.error(res.code);
            this.getList(this.pageNum, this.pageSize);
        },
        async updateUser(){
            let { data:res } = await this.$axios.post("/user/update",this.updateForm)
            if (res.code != 200) return this.$message.error(res.code);
            this.$message.success(res.code);
            // window.console.log(JSON.stringify(this.updateForm));
            this.updateDialogVisible = false;
            this.getList(this.pageNum, this.pageSize);
        },
        async updatebefore(index,row){
            // console.log(index);
            // console.log(row);
             let { data: res } = await this.$axios.get("/user/getlist", {
            params: {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                id:row.id
            },
            });
            this.updateForm = res.data.list[0];
            console.log( res.data.list[0] );
            this.updateDialogVisible = true;
        },
        async uploadFile(){
            const formData = new FormData();
            const file = this.$refs.upload.uploadFiles[0];
            const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } };
            if (!file) { // 若未选择文件
            alert('请选择文件');
            return;
            }
            window.console.log('图片解析为：  '+file.raw)
            formData.append('file', file.raw);
            formData.append('type', 'YONGHU');
            let {data: res} =  await this.$axios.post('/uploadImg', formData, headerConfig)
            window.console.log(res)
            this.nowImg = res.data.imgurl
        }
        
    },
    created(){
        this.getList(this.pageNum,this.pageSize)
    }
}

</script>


<style scoped lang="scss">
.el-input{
    padding: 20px;
}
.btn{
    margin: 20px 0px 0px 20px !important;
}
.el-form {
  border-radius: 10px;
  padding: 10px;
  .el-form-item {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
}
</style>